<template>
  <div class="approve-business-card-total">
    <el-card :class="'approve-business-card-' + index">
      <div>
        <div
          slot="header"
          class="clearfix card-box-header"
        >
          <span>第{{ index + 1 }}批节点</span>
          <el-button
            style="float: right; padding: 3px 0;zIndex:999"
            type="text"
            @click="removeItem(index)"
          >x</el-button>
        </div>
        <div class="text item">
          <SelectPerson :options="selectData" />
        </div>
      </div>
    </el-card>
    <img
      v-if="index != 3 && index != 0"
      :class="'approve-arrow-' + index"
      src="./line.png"
    />
    <img
      v-if="index == 3"
      :class="'approve-arrow-' + index"
      src="./arrow.png"
    />
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import SelectPerson from "./selectPerson";
export default {
  components: { SelectPerson },
  props: ["data", "index"],
  data() {
    return {
      selectData: [
        {
          type: "selectApproves",
          multiple: true,
          label: "审批人",
          prop: "person" + this.index,
          value: this.data,
          onchange: e => {
            const data = {};
            data["resIds" + this.index] = e;
            this.$store.dispatch("system/updateSubmitContent", data);
          },
          option: this.$store.state.app.allUser
        }
      ]
    };
  },
  //    watch: {
  //    "this.$store.state.app.allUser":{
  //      handler(newData,oldData){
  //      this.$set(this.selectData[0],"option",this.$store.state.app.allUser)
  //      },
  //      immediate:true,
  //      deep:true

  //    }
  //   //...mapState(["system","app"]),
  // },
  mounted() {
    console.log(this.data, "8585");
  },

  methods: {
    removeItem(i) {
      console.log(i, "+++++i++++");
      console.log(this.$parent, "+++++parant");
      // 移除已选择的数据
      const data = {};
      data["resIds" + this.index] = null;
      this.$store.dispatch("system/updateSubmitContent", data);
      // 回调removeItem事件
      this.$emit("removeItem", i);
    }
  }
};
</script>

<style>
.card-box-header {
  padding: 5px;
  margin: 0 0 10px 0;
  background: #eee;
  border-radius: 3px;
}
.el-card__body {
  padding: 0;
  box-shadow: 0px 1px 5px 0px rgba(7, 30, 75, 0.17);
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.approve-business-card-total {
  display: block;
}
.approve-business-card {
  position: absolute;
}
.approve-business-card-0 {
  top: 0px;
  left: 0px;
  width: 325px;
  height: 195px;
  position: absolute;
  margin: 10px;
}
.approve-arrow-1 {
  position: absolute;
  left: 180px;
  top: 203px;
}
.approve-business-card-1 {
  top: 295px;
  left: 0px;
  width: 325px;
  height: 195px;
  position: absolute;
  margin: 10px;
}
.approve-arrow-2 {
  position: absolute;
  left: 180px;
  top: 500px;
}
.approve-business-card-2 {
  top: 588px;
  left: 0px;
  width: 325px;
  height: 195px;
  position: absolute;
  margin: 10px;
}
.approve-arrow-3 {
  position: absolute;
  left: 335px;
  top: 150px;
}
.approve-business-card-3 {
  top: 0px;
  left: 400px;
  width: 325px;
  height: 195px;
  position: absolute;
  margin: 10px;
}
.approve-arrow-4 {
  position: absolute;
  left: 580px;
  top: 203px;
}
.approve-business-card-4 {
  top: 295px;
  left: 400px;
  width: 325px;
  height: 195px;
  position: absolute;
  margin: 10px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
